<template>
  <div>
    <div class="head">
      <div class="input">
        <span>试卷名称：</span>
        <el-input v-model="queryData.exam_name" placeholder="请输入" />
      </div>
      <div class="input">
        <span>培训类型：</span>
        <el-cascader
          :show-all-levels="false"
          :options="options2"
          v-model="queryData.selected_type_ids"
          :props="{ multiple: true, checkStrictly: true, label: 'title', value: 'id' }"
          clearable
        ></el-cascader>
      </div>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
      <el-button type="primary" class="btn" @click="add">新增试卷</el-button>
    </div>
    <div class="box">
      <el-table
        :data="tableData"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed type="index" align="center" label="序号" width="50" />
        <el-table-column fixed prop="exam_name" align="center" show-overflow-tooltip label="试卷名称" min-width="200" />
        <el-table-column prop="resource_type" align="center" label="课件来源" min-width="100">
          <template #default="scope">
            <span v-if="scope.row.resource_type == 1">公共资源</span>
            <span v-else-if="scope.row.resource_type == 2">平台资源</span>
            <span v-else-if="scope.row.resource_type == 3">我的资源</span>
          </template>
        </el-table-column>
        <el-table-column prop="type_name" align="center" label="培训类型" min-width="140"> </el-table-column>
        <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
          <template #default="scope">
            <div class="action">
              <span @click="topicDetail(scope.row)">试题</span>
              <span @click="edit(scope.row)">编辑</span>
              <span @click="delOk(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="margin-top: 5px; text-align: right"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="addData.id ? '编辑试卷' : '新增试卷'"
      :visible.sync="isShowAdd"
      width="1000px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addData"
        :model="addData"
        style="width: 100%"
        :rules="addRules"
        label-width="90px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试卷名称" prop="exam_name">
              <el-input placeholder="请输入" v-model="addData.exam_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训类型" prop="selected_type_ids">
              <el-cascader
                :show-all-levels="false"
                :options="options2"
                style="width: 100%"
                v-model="addData.selected_type_ids"
                :props="{ multiple: true, checkStrictly: true, label: 'title', value: 'id' }"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合格分数" prop="min_point">
              <el-input-number
                :min="0"
                :max="100"
                controls-position="right"
                :precision="0"
                v-model="addData.min_point"
                class="input_number"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="补考次数" prop="moreType">
              <div style="display: flex; align-items: center; height: 36px">
                <el-radio-group v-model="addData.moreType">
                  <el-radio :label="1">不限</el-radio>
                  <el-radio :label="2">限制</el-radio>
                </el-radio-group>
                <span class="more-type" v-if="addData.moreType == 2">
                  考试连续<el-input-number
                    v-model="addData.more_num"
                    :min="1"
                    class="input_number"
                    controls-position="right"
                    style="width: 80px"
                  ></el-input-number
                  >次不合格重新培训
                </span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单选题数量" prop="dan_num">
              <el-input-number
                :min="0"
                :max="100"
                controls-position="right"
                :precision="0"
                v-model="addData.dan_num"
                class="input_number"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单选题分数" prop="dan_point">
              <el-input-number
                :min="0"
                :max="100"
                controls-position="right"
                :precision="0"
                v-model="addData.dan_point"
                class="input_number"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="多选题数量" prop="duo_num">
              <el-input-number
                :min="0"
                :max="100"
                controls-position="right"
                :precision="0"
                v-model="addData.duo_num"
                class="input_number"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="多选题分数" prop="duo_point">
              <el-input-number
                :min="0"
                :max="100"
                controls-position="right"
                :precision="0"
                v-model="addData.duo_point"
                class="input_number"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="判断题数量" prop="pan_num">
              <el-input-number
                :min="0"
                :max="100"
                controls-position="right"
                :precision="0"
                v-model="addData.pan_num"
                class="input_number"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="判断题分数" prop="pan_point">
              <el-input-number
                :min="0"
                :max="100"
                controls-position="right"
                :precision="0"
                v-model="addData.pan_point"
                class="input_number"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="总分值">
              <span>{{ totalMun || 0 }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试时间" prop="exam_limit_time">
              <div style="display: flex; align-items: center">
                <el-input-number
                  :min="0"
                  :max="100"
                  controls-position="right"
                  :precision="0"
                  v-model="addData.exam_limit_time"
                  class="input_number"
                  style="width: calc(100% - 40px);"
                ></el-input-number>
                <span style="margin-left: 6px;">分钟</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="submitForm('addData')">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { ExamList, TrainTypeTree, ExamDelete, ExamSave, ExamInfo } from '@/api/manage';
export default {
  name: 'cultivate',
  data() {
    return {
      tableHeight: 500,
      queryData: {
        exam_name: '',
        type_ids: [],
        selected_type_ids: [],
        page: 1,
        size: 10,
        create_type: 2,
        resource_type: 3,
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      dialogVisible: false,
      options2: [],
      isShowAdd: false,
      item: null,
      addData: {
        selected_type_ids: [],
      },
      addRules: {
        selected_type_ids: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        exam_name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
        moreType: [{ required: true, message: '请输入补考次数', trigger: 'blur' }],
        dan_num: [{ required: true, message: '请输入单选题数量', trigger: 'blur' }],
        dan_point: [{ required: true, message: '请输入单选题分数', trigger: 'blur' }],
        duo_num: [{ required: true, message: '请输入单选题数量', trigger: 'blur' }],
        duo_point: [{ required: true, message: '请输入单选题分数', trigger: 'blur' }],
        pan_point: [{ required: true, message: '请输入单选题数量', trigger: 'blur' }],
        pan_num: [{ required: true, message: '请输入单选题分数', trigger: 'blur' }],
        min_point: [{ required: true, message: '请输入合格分数', trigger: 'blur' }],
        exam_limit_time:[{ required: true, message: '请输入考试时间', trigger: 'blur' }]
      },
    };
  },
  watch: {
    'queryData.selected_type_ids'(newValue, oldValue) {
      if (this.queryData.selected_type_ids.length > 0) {
        this.queryData.type_ids = [];
        this.queryData.selected_type_ids.forEach((item) => {
          this.queryData.type_ids.push(item[item.length - 1]);
        });
      } else {
        this.queryData.type_ids = [];
      }
    },
    'addData.selected_type_ids': {
      handler(newValue, oldValue) {
        if (this.addData.selected_type_ids.length > 0) {
          this.addData.type_ids = [];
          this.addData.selected_type_ids.forEach((item) => {
            this.addData.type_ids.push(item[item.length - 1]);
          });
        } else {
          this.addData.type_ids = [];
        }
      },
      deep: true,
    },
    // 'addData.moreType'(newValue, oldValue){
    //   if(newValue == 1){
    //     this.addData.more_num = -1;
    //   }else{
    //     this.addData.more_num = this.addData.more_num != -1 ? 1 : -1;
    //   }
    // }
  },
  computed: {
    totalMun() {
      return this.$math.add(
        this.$math.multiply(this.addData.dan_num || 0, this.addData.dan_point || 0),
        this.$math.multiply(this.addData.duo_num || 0, this.addData.duo_point || 0),
        this.$math.multiply(this.addData.pan_num || 0, this.addData.pan_point || 0),
      );
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
    this.getTrainTypeTree();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.totalMun != 100) {
            this.$message.error('总分值不为100，请检查并修改!');
            return;
          }
          this.addData.create_type = 2;
          this.addData.resource_type = 3;
          ExamSave(this.addData).then((res) => {
            this.$message.success(this.addData.id ? '修改成功' : '添加成功');
            this.handleClose();
            this.getList();
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    handleClose() {
      this.addData = {
        selected_type_ids: [],
      };
      this.isShowAdd = false;
      this.item = null;
    },
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.exam_name = '';
      this.queryData.selected_type_ids = [];
      this.queryData.type_ids = [];
      this.search();
    },
    topicDetail(item) {
      this.$router.push({
        path: '/company/testDetails/index',
        query: {
          id: item.id,
          create_type: 2,
          resource_type: 3,
        },
      });
    },
    edit(item) {
      ExamInfo({
        id: item.id,
      }).then((res) => {
        this.addData = JSON.parse(JSON.stringify(res.data.data));
        this.isShowAdd = true;
        this.$set(this.addData, 'moreType', this.addData.more_num == -1 ? 1 : 2);
      });
    },
    del(item) {
      this.dialogVisible = true;
      this.item = item;
    },
    delOk(item) {
      this.$confirm('确定删除该试卷?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        ExamDelete({
          id: item.id,
        }).then((res) => {
          this.$message.success('删除成功');
          this.item = null;
          this.dialogVisible = false;
          this.getList();
        });
      });
    },
    add() {
      // this.$router.push({
      //   path: '/enterprise/addTest/index',
      // });
      this.addData = {
        exam_name: '',
        selected_type_ids: [],
        type_ids: [],
        more_num: -1,
        moreType: 1,
        dan_num: undefined,
        dan_point: undefined,
        duo_num: undefined,
        duo_point: undefined,
        pan_point: undefined,
        pan_num: undefined,
        min_point: undefined,
        create_type: 2,
        resource_type: 3,
      };
      this.isShowAdd = true;
    },
    getList() {
      this.isTableLoading = true;
      ExamList(this.queryData).then((res) => {
        this.isTableLoading = false;
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    getTrainTypeTree() {
      TrainTypeTree().then((res) => {
        this.options2 = res.data.list;
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.input_number {
  width: 100%;
  text-align: center;
}
.demo-ruleForm /deep/ .el-input-number__decrease,
.demo-ruleForm /deep/ .el-input-number__increase {
  display: block !important;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.more-type {
  font-size: 12px;
  margin-left: 6px;
}
</style>
